<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>学生的预约</title>
  <jsp:include page="../../common/common_resources.jsp"/>
</head>
<body>
  <section class="d-none" id="evaluationSec">
    <form class="layui-form" lay-filter="evaluationForm">
      <!--每次打开弹窗时设置要被更新的订单id-->
      <input type="hidden" name="id"/>
      <!--每次打开弹窗时弹窗的索引id-->
      <input type="hidden" name="evaluationSecDiaId"/>
      <div class="layui-form-item mt-d7">
        <label class="layui-form-label">输入评价</label>
        <div class="layui-input-block">
            <textarea name="evaluationByStudent" placeholder="请输入评价"
                      rows="6" lay-verify="required"
                      class="layui-textarea">
            </textarea>
        </div>
        <div class="layui-form-item  mt-d7">
          <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="confirmEvaluation">确认</button>
          </div>
        </div>
      </div>
    </form>
  </section>
  <div class="cont">
    <!--头部按钮区域新增、编辑、搜索-->
    <div class="text-center mt-d7 header-bar">
      <section class="layui-inline">
        <!--必须放在layui-form中，select样式才生效-->
        <form class="layui-form" lay-filter="searchForm" style="margin-top: 5px">
          <input type="hidden" name="launchId" value="${sessionScope.user.id}"/>
          <section class="layui-form-item">
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input class="layui-input" name="targetUserName"
                       autocomplete="off" placeholder="按教师名模糊搜索">
              </div>
              <div class="layui-input-inline">
                <input class="layui-input" name="jobTitle"
                       autocomplete="off" placeholder="按求职标题模糊搜索">
              </div>
              <div class="layui-input-inline">
                <button class="layui-btn" id="searchBtn">
                  <i class="layui-icon layui-icon-search">搜索</i>
                </button>
              </div>
            </div>
          </section>
        </form>
      </section>
    </div>
    <!-- 行工具栏,等待同意时需要等待对方处理,此页面不需要处理 -->
    <script type="text/html" id="operationBar">
      {{#  if(d.status === "ing"){ }}
        <a class="layui-btn layui-btn-xs" lay-event="makeComplete">完成</a>
      {{#  } else if(d.status === "done"){ }}
        <a class="layui-btn layui-btn-xs" lay-event="evaluateTeacher">给老师写评价</a>
      {{#  } }}
    </script>
    <!--表格区域-->
    <section>
      <table id="table" lay-filter="test"></table>
    </section>
  </div>
  <script>
    layui.use(['table', 'jquery', 'form','layer'], function (table,$,form,layer) {
      // 表格渲染
      table.render({
        elem: '#table'
        , id:"tb" // 未设置的话取table#id的值
        , height: 'full-70' // 高度为屏幕高度-70px
        , method: "post"
        , url: '<%=request.getContextPath() %>/orderInfo/loadTable'
        // 表单取值,对于select就不能使用$().val来获取值了，获取不到
        // 统一使用layui表单取值的方法
        , where:form.val("searchForm")
        , page: true // 开启分页
        , cellMinWidth: 80
        , even:true //开启隔行背景
        , cols: [[ //表头
            {field: 'id', title: '订单编号', sort: true}
          , {field: 'targetUserName', title: '教师'}
          , {field: 'jobTitle', title: '求职标题'}
          , {field: 'jobCourseName', title: '教授课程'}
          , {field: 'jobDetailDesc', title: '详细描述'}
          , {field: 'jobChargingRule', title: '计费规则(单位:小时)'}
          , {field: 'jobPublishTime', title: '发布时间'}
          , {field: 'preAppointTime', title: '预约时间'}
          , {field: 'evaluationByStudent', title: '我对教师的评价'}
          , {field: 'evaluationByTeacher', title: '教师对我的评价'}
          , {field: 'statusDesc', title: '当前状态'}
          // toolbar绑定工具条模板
          , {title:'操作', align: 'center', toolbar: '#operationBar'}
        ]],
        parseData: function (res) { //res 即url返回的数据
          return {
            "code": res.success ? 0 : -1, //解析接口状态
            "msg": "正在加载,请稍等...", //解析提示文本
            "count": res.data.totalCount, //解析数据长度
            "data": res.data.rows //解析数据列表
          };
        },
        request: {
          pageName: 'pageNow', //页码的参数名称，默认：page
          limitName: 'pageSize' //每页数据量的参数名，默认：limit
        }
      });
      // 行工具条事件
      table.on('tool(test)', function (obj) {
        var rowData = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'makeComplete') {
          doUpdate({"id":rowData.id,"status":"done"});
        }else if (layEvent === 'evaluateTeacher') {
          if (rowData.evaluationByStudent) {
            layer.open({
              content: "你已经评论过了",
              icon: 2,
              anim: 6
            });
            return;
          }
          // 页面层弹出窗口
          var evaluationSecDiaId = layer.open({
            type:1
            ,title:'评价'
            ,area: ['450px', '300px']
            ,content: $("#evaluationSec")
          });
          // 设置表单的订单id
          form.val("evaluationForm",{
            "id":rowData.id,
            "evaluationSecDiaId":evaluationSecDiaId
          });
        }
      });
      // 搜索
      $("#searchBtn").click(function () {
        reloadTable(1);
        // 按钮放在layui-form中点击就会触发提交,这里返回false不让他提交
        return false;
      });
      // 默认是在弹出框弹出时的那个pageNow reload
      function reloadTable(toPageNum) {
        table.reload("tb",{
          where: form.val("searchForm"),
          page:{
            curr:toPageNum
          }
        });
      }
      // 执行更新
      function doUpdate(param) {
        $.ajax({
          url: '<%=request.getContextPath() %>/orderInfo/update',
          method: 'post',
          data: param,
          success: function (result) {
            if (result.success) {
              table.reload("tb");
            } else {
              layer.msg(result.errMsg);
            }
          }
        });
      }
      // 添加评价弹窗里的表单提交
      form.on('submit(confirmEvaluation)', function (data) {
        var evaluationFormData = form.val("evaluationForm");
        doUpdate(evaluationFormData);
        layer.close(evaluationFormData["evaluationSecDiaId"]);
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
    });
  </script>
</body>
</html>
